<template>
    <div class="wrap">

        <!-- 查询条件，默认在页面加载后，组件会触发一次queryHandle事件 -->
        <commonQuery @queryHandle="loadData" :allowAllFieldList="[]"></commonQuery>

        <div style="color: rgb(255, 0, 0);
                        font-size: 13px;
                        margin-left: 2px;
                        margin-bottom:0px;">* 参与参评的信息以用户最后一次提交信息为准，用户保存数据不参与参评</div>

        <div class="minTitle">
            <div class="flag"></div>
            <div class="text">拟参评不符合总人数 {{totalPeople}} 人</div>
        </div>

        <div ref="chartDataContent" class="chartDataContent dataContent" v-show="legendDataList.length > 0">
            <div class="chart">
                <div class="operation">
                    <a @click="detail()">详情 》</a>
                </div>
                <div id="chartContainer" style="height:400px;width:100%;"></div>
            </div>
            <div class="colorDescription">
                <div class="content">
                    <div class="item" v-for="(item,index) in legendDataList" :key="index">
                        <div class="color" :style="'background-color:'+item.color"></div>
                        <div class="paragraph" v-html="item.name"></div>
                        <span class="perCount">{{list[index].count}}人</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="notData">
            暂无数据
        </div>
    </div>
</template>

<script>

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

import { participationFindNotPassRatePost} from '@/service/api'
import Qs from 'qs'
import commonQuery from "./CommonQuery";


export default {
    data(){
        return {
            totalPeople:0,

            formQuery:"",

            legendDataList:[],

            list:[]
        }
    },
    components:{
        commonQuery
    },
    mounted(){
    },
    methods:{
        loadData(queryObj){
            queryObj.hasPass = false;  // 是否符合条件： true 符合，false 不符合 null 全部

            this.formQuery = queryObj;
            
            participationFindNotPassRatePost(Qs.stringify(queryObj)).then(res => {
                if(res.code == 200){

                    var dataList = new Array();
                    this.list = res.data.data;
                    this.totalPeople = res.data.totalCount;
                    for(var i=0;i<res.data.data.length;i++){
                        var value = res.data.data[i].count;
                        dataList.push([res.data.data[i].name,value]);
                    }


                    this.updateChart(dataList);
                    if(dataList.length <= 0){
                        // this.$refs.chartDataContent.style.display = "none";
                        document.querySelector(".chartDataContent").style.display = 'none';
                        document.querySelector(".notData").style.display = 'flex';
                    }else{
                        // this.$refs.chartDataContent.style.display = "flex";

                        // 延时执行，否则无法生效
                        setTimeout(function(){
                            document.querySelector(".chartDataContent").style.display = 'flex';
                        },100);
                        document.querySelector(".notData").style.display = 'none';
                    }
                }
            });
        },
        updateChart:function(data){
            this.chart = Highcharts.chart('chartContainer', {
                colors:['#a6c1ee','#96e6a1','#84fab0','#8fd3f4','#a6c0fe','#e0c3fc','#8ec5fc','#4facfe','#00f2fe','#38f9d7','#30cfd0','#a8edea ','#5ee7df','#b490ca','#66a6ff','#b1f4cf','#2af598 ','#4facfe','#72afd3','#37ecba','#ace0f9','#48c6ef','#6f86d6','#accbee','#74ebd5','#9face6','#6a85b6','#bac8e0','#6991c7','#97d9e1'],
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                legend:{

                },
                title: {
                    text: ''
                },
                tooltip: {
                    hideDelay:0, // 隐藏延时
                    headerFormat:'<span style="font-size: 15px">{point.key}</span><br/>', // 标题设置
                    style:{ "color": "#333333", "cursor": "default", "fontSize": "14px", "pointerEvents": "none", "whiteSpace": "nowrap" },
                    pointFormat: '不符合此项人数:{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '浏览器占比',
                    dataLabels:{ // 标签设置
                        style:{"color": "contrast", "fontSize": "12px", "fontWeight": "bold", "textOutline": "1px 1px contrast" },  // 标签样式
                        format:"{y}人"
                    },
                    data:data,
                    // data: [
                    //     ['Firefox',   45.0],
                    //     ['IE',       26.8],
                    // ]
                }],
                credits: {  
                    enabled: false     // 不显示右下角LOGO 
                } 
            });
              
            // 获取series中的所有数据项
            this.legendDataList = this.chart.series[0].data;
            
        },
        detail:function(){
            this.$router.push({name:'ListOfNonconformingPersons',params:this.formQuery});
        }
    }
}
</script>

<style scoped>

.wrap *{
    z-index: 1;
}

.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 14px 0px;
    border-top: solid 1px #f3f3f3;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;

}


.dataContent{
    padding: 60px 0px;
    padding-bottom: 10px;
    /*display: flex;*/
    display:none;
}
.dataContent>div{
    width: 50%;
}
.dataContent>div.chart{
    padding-right: 20px;
}
.dataContent>div.chart .operation{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.dataContent>div.chart .operation>a{
    font-size: 15px;
    color: #31478F;
    cursor: pointer;
}
.dataContent>div.colorDescription{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
}
.dataContent>div.colorDescription .item{
    display: flex;
    font-size: 13px;
    color: #31478F;
    align-items: center;
    margin-bottom:10px;
}
.dataContent>div.colorDescription .color{
    width: 21px;
    height: 21px;
    border: 2px solid #E2F0FE;
    border-width: 3px;
    background-color: #333;
    box-sizing: border-box;
    margin-right: 20px;
    flex-shrink: 0;
}

.notData{
    display: none;
    color: gray;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

.paragraph{
    margin-right: 10px;
}

.perCount{
    border-radius: 2px;
    color: #fff;
    background-color: #409eff;
    font-size: 10px;
    padding: 1px 4px;
    opacity: 0.5;
    height: 16px;
    line-height: 16px;
    margin-left: auto;
    flex: 0 0 26px;
    text-align: center;
}
</style>